import React, { Component } from 'react';
import ReactDom from 'react-dom';
import PropTypes from 'prop-types';
import { Divider,Breadcrumb, Row, Col, Input, Tabs,Button,Form,Select,Radio,Tag,Icon } from 'antd';
import AddProject from '../add/add'
import './ProjectList.scss';
import TMTable from "../../../containers/TMTable/Table"
import Echarts from '../../../components/echarts/echarts';
import MyTag from '../../MyTag/MyTag';
// import StandardFormRow from './components/StandardFormRow';
const ButtonGroup = Button.Group;
const Search = Input.Search;
const FormItem = Form.Item;
const Option = Select.Option;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const CheckableTag = Tag.CheckableTag;
// 主体管理 
class ProjectList extends Component {
    constructor (props) {
        super(props);
        const columns = [{
            title: '简称',
            key: 'nickname',
            dataIndex: 'nickname',
            width: '10%',
            render: (text, record) => {
                 return (
                <span style={{color:'#bababa' }}>
                  {record.nickname}
                </span>
                    );
            },
        }, {
            title: '全称',
            key: 'fullname',
            dataIndex: 'fullname',
            width: '18%',
            render: (text, record) => {
                 return (
                            <span style={{color:'#bababa' }}>
                  {record.fullname}
                </span>
                    );
            },
        }, 
        {
            title: '工作进展',
            key: 'projecting',
            dataIndex: 'projecting',
            width: '10%',
            render: (text, record) => {
                 return (
                        <span style={{ cursor: 'pointer' }}>
                  {record.projecting}
                </span>
                    );
            },
        }, 
        {
            title: '项目经理',
            key: 'status',
            dataIndex: 'status',
            width: '10%',
            render: (text, record) => {
                 return (
                        <span style={{ cursor: 'pointer' }}>
                  {record.status}
                </span>
                    );
            },
        }, 
        {
            title: '资产类型',
            key: 'guimo',
            dataIndex: 'guimo',
            width: '20%',
            render: (text, record) => {
                 return (
                        <span style={{ cursor: 'pointer' }}>
                  {record.guimo}
                </span>
                    );
            },
        }, 
        {
            title: '账面回报',
            key: 'useYes',
            dataIndex: 'useYes',
            width: '12%',
            render: (text, record) => {
                 return (
                        <span style={{ cursor: 'pointer' }}>
                  {record.useYes}
                </span>
                    );
            },
        }, 
        {
            title: '操作',
            key: 'operate',
            dataIndex: 'operate',
            width: '25%',
            render: (text, record) => {
                    return (<span>
                        {/* <a role="button" style={{color:'#1890FF'}}>编辑</a>&nbsp;&nbsp; */}
                    <a role="button" name="watch" id={record.id} style={{color:'#1890FF'}} onClick={this.showDetail(record.id)}>查看</a>
                    </span>
                    );
            },
        }
        ];
        this.state = {
            selectedTags: [],
            searchVisble:true,
            dataSum:'',
            numData:'',
            tableVisible:true,
            selectedRowKeys: [],
            loading: false,
            columns,
            tagsFromServer:['全部','设立中','基本户','募集户','备案中','已备案'], 
            dataSource: [{
                id:'1',
                nickname:'aaa',
                fullname:'abcd',
                projecting:'设立中',
                status:'正常',
                guimo:'1000',
                useYes:'是',
            },
            {
                id:'2',
                nickname:'bbb',
                fullname:'bbcd',
                projecting:'已备案',
                status:'正常',
                guimo:'1000',
                useYes:'是',
            },
            {
                id:'3',
                nickname:'bbb',
                fullname:'bbcd',
                projecting:'清算中',
                status:'正常',
                guimo:'1000',
                useYes:'是',
            },
            {
                id:'4',
                nickname:'bbb',
                fullname:'bbcd',
                projecting:'已备案',
                status:'正常',
                guimo:'1000',
                useYes:'是',
            },
            {
                id:'5',
                nickname:'bbb',
                fullname:'bbcd',
                projecting:'宁波空壳',
                status:'正常',
                guimo:'1000',
                useYes:'是',
            }
        ],
        };
      }

    componentDidMount () {
        
    }

    //进入详情页
    showDetail(id){
        // ReactDom.render(<ManageDetail />,document.getElementsByClassName("files-view"));
    }

    //新建
    addTable(){ 
        ReactDom.render(<AddProject />,document.getElementById("filesData"));
    }

    start = () => {
        this.setState({ loading: true });
        setTimeout(() => {
          this.setState({
            selectedRowKeys: [],
            loading: false,
          });
        }, 1000);
      }

      handleChange(tag, checked) {
        const { selectedTags } = this.state;
        const nextSelectedTags = checked ?
                [...selectedTags, tag] :
                selectedTags.filter(t => t !== tag);
        this.setState({ selectedTags: nextSelectedTags });
      }

    onSelectChange = (selectedRowKeys) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
      }

    //切换下拉选择  
    handleSelectChange = (value) => {
        console.log(value);
        this.props.form.setFieldsValue({
          note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        });
      }

    //显示表格
      showTable(){
        this.setState({
            tableVisible:true,
        });
      }

      //显示图表
      showCharts(){
        this.setState({
            tableVisible:false,
        });
      }

      //点击“收起”
      hideSearch(){
        const { searchVisble } = this.state;
        // var parentElements = document.getElementsByClassName("searchWrapper")[0];
          this.setState({
              searchVisble:!searchVisble,
          });  
      }

      handleFormSubmit = () => {
        const { form, dispatch } = this.props;
        // setTimeout 用于保证获取表单值是在所有表单字段更新完毕的时候
        setTimeout(() => {
          form.validateFields(err => {
            if (!err) {
              // eslint-disable-next-line
              dispatch({
                type: 'list/fetch',
                payload: {
                  count: 8,
                },
              });
            }
          });
        }, 0);
      };

    render () {
        const { selectedTags } = this.state;
        var screenHeight = window.screen.availHeight;
        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
          selectedRowKeys,
          onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <div id="container" className="searchWrapper" style={{height:'auto'}}>
          {this.state.searchVisble?
                <Form onSubmit={this.handleSaveShareSettings}>
                <Row>
                <Col style={{marginLeft:20,marginTop:9,color:'rgba(0, 0, 0, 0.85)'}} span={2}>搜索选项:</Col>
                <Col span={20}>
                <Col span={10}>
                 <FormItem label="关键词:"  labelCol={{ span: 5 }}  wrapperCol={{ span: 19}}>
                     {
                     getFieldDecorator('keyword', {
                     })( <span>
                     <Search placeholder="请输入关键词" onSearch={value => console.log(value)} 
                     style={{ width: 200 }}
                     /><a style={{marginLeft:5,color:'#1890FF'}}>清空</a></span>)
                     }
                     </FormItem>
                </Col>
                <Col span={10}>
                 <FormItem label="关联主体:"  labelCol={{ span: 5 }}  wrapperCol={{ span: 19 }}>
                 {
                 getFieldDecorator('projection', {
                 })( <span>
                     <Search placeholder="请输入关联主体" onSearch={value => console.log(value)} 
                     style={{ width: 200 }}
                     /><a style={{marginLeft:5,color:'#1890FF'}}>清空</a></span>)
                 }
                 </FormItem>
                 </Col>
             </Col>
                <Col style={{float:'right',marginTop:9,marginRight:8}} onClick={() => this.hideSearch()}>
                <a style={{ color: 'rgb(24, 144, 255)' }}>
                收起 <Icon type="up" />
            </a>
                </Col>
                <Divider />
                </Row>
                 
           
                </Form>
                :
                <Form onSubmit={this.handleSaveShareSettings}>
                 <Row>
                 <Col style={{marginLeft:20,marginTop:9,color:'rgba(0, 0, 0, 0.85)'}} span={2}>搜索选项:</Col>
                <Col span={20}>
                <Col span={10}>
                 <FormItem label="关键词:"  labelCol={{ span: 5 }}  wrapperCol={{ span: 19}}>
                     {
                     getFieldDecorator('keyword', {
                     })( <span>
                     <Search placeholder="请输入关键词" onSearch={value => console.log(value)} 
                     style={{ width: 200 }}
                     /><a style={{marginLeft:5,color:'#1890FF'}}>清空</a></span>)
                     }
                     </FormItem>
                </Col>
                <Col span={10}>
                 <FormItem label="关联项目:"  labelCol={{ span: 5 }}  wrapperCol={{ span: 19 }}>
                 {
                 getFieldDecorator('projection', {
                 })( <span>
                     <Search placeholder="请输入关联项目" onSearch={value => console.log(value)} 
                     style={{ width: 200 }}
                     /><a style={{marginLeft:5,color:'#1890FF'}}>清空</a></span>)
                 }
                 </FormItem>
                 </Col>
             </Col>
                <Col style={{float:'right',marginTop:9,marginRight:8}} onClick={() => this.hideSearch()}>
                <a style={{ color: 'rgb(24, 144, 255)' }}>
                展开 <Icon type="down" />
              </a>
                </Col>
                <Divider />
                </Row>
                </Form>
                }
                </div>
                <div style={{width:'100%',background:'#eceff3',height:20}}></div>
                {this.state.tableVisible?
                <div className="tableWrapper">
                    <Row>
                        <Col span={18}>
                            <Button className="margin-r-5" icon="folder" onClick={() => this.addTable()}>新建</Button> 
                            <Button className="margin-r-5">批量删除</Button> 
                            <Button className="margin-r-5">设立主体</Button> 
                        </Col>
                        <Col span={4} style={{float:'right'}}>
                            <ButtonGroup>
                                <Button onClick={() => this.showTable()}>列表</Button>
                                <Button onClick={() => this.showCharts()}>报表</Button>
                            </ButtonGroup>
                        </Col>
                    </Row>

                        <div>
                        <div style={{ marginBottom: 8,marginTop:10,background:'#E6F7FF',padding:5 }}>
                           <span style={{ marginRight: 15 }}>
                               {hasSelected ? `已选择 ${selectedRowKeys.length} 项` : ''}
                           </span>
                           <a
                               type="primary"
                               onClick={this.start}
                               disabled={!hasSelected}
                               loading={loading}
                               style={{color:'#1890FF'}}>
                               清空
                           </a>
                           </div>
                           {this.state.searchVisble?
                             <TMTable id="tmTable" scroll={{y:screenHeight-682}} rowSelection={rowSelection}  columns={this.state.columns} dataSource={this.state.dataSource} />
                            :
                            <TMTable id="tmTable" scroll={{y:screenHeight-582}} rowSelection={rowSelection}  columns={this.state.columns} dataSource={this.state.dataSource} />
                            }
                       </div>
                </div>
                :
                <div className="tableWrapper">
                 <Row>
                 <Col span={5}>数量统计及提醒</Col>
                   <Col span={5} style={{float:'right'}}>
                            <ButtonGroup>
                                <Button onClick={() => this.showTable()}>列表</Button>
                                <Button onClick={() => this.showCharts()}>报表</Button>
                            </ButtonGroup>
                        </Col>
                  </Row>
                  <Row>
                  <Col span={17}> <Echarts dataSource={this.state.dataSource}/></Col>
                  <Col span={6} style={{marginTop:30,marginLeft:30}}> 
                  <div>
                      <ul className="ulList">
                        <li>清算中</li>
                        <li>15</li>
                      </ul>
                      <ul className="ulList">
                        <li>设立中</li>
                        <li>1</li>
                      </ul>
                      <ul className="ulList">
                        <li>已备案</li>
                        <li>15</li>
                      </ul>
                  </div>
                  </Col>
                  </Row>
                </div>
            }
            </div>
          );
    }
}

ProjectList.propTypes = {
    form: PropTypes.object.isRequired,
};

const WrappedFileManage= Form.create({})(ProjectList);
export default WrappedFileManage;